﻿@{
    ViewBag.Title = "Index";
}
@using PortalLogReport.Common
<h2>Report</h2>
 

<div id="tab-container" class="tab-container">
   

    <div id="divhead">
         StartTime : <input id="StartTime" type="text" readonly="true" /> EndTime : <input id="EndTime"  type="text" readonly="true" /> Select: @Html.DropDownList("select",new SelectList(Enum.GetNames(typeof(PortalLogReport.Common.ChartCommon.DimensionTypes))))

    </div>
 
     
    <ul class='etabs'>
        <li class='tab'><a href="#Content1">Chart A</a></li>
        <li class='tab'><a href="#Content2">Chart B</a></li>
        <li class='tab'><a href="#Content3">Chart C</a></li>
    </ul>
    <div id="Content1">
        <div id="main1" style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>
    </div>
    <div id="Content2">
        <div id="main2" style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>
    </div>
    <div id="Content3">
        <div id="main3" style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>
    </div>
</div>


@section Scripts {

    @Scripts.Render("~/Scripts/jquery.easytabs.js")
    @Scripts.Render("~/Scripts/ECharts/esl.js")

    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")

    <script type="text/javascript">
        $(document).ready(function () {
        
            
            $('#tab-container').easytabs()
            .bind('easytabs:after', function () {
                var obj = $(this).find('div.active').attr('id');
                switch (obj) {
                    case 'Content1':
                        ShowChartA();
                        break;
                    case 'Content2':
                        ShowChartB();
                        break;
                    case 'Content3':
                        ShowChartC();
                        break;
                }
            });
            
            ShowChartA();
         
            $("#StartTime").datepicker({

                dateFormat: "yy/mm"
            });
            $("#EndTime").datepicker(
                {
                    dateFormat: "yy/mm"

                });
          
            
        });

        require.config({
            packages: [
                {
                    name: 'echarts',
                    location: '@Url.Content("~/Scripts/ECharts")',
                    main: 'echarts'
                },
                {
                    name: 'zrender',
                    location: '@Url.Content("~/Scripts/ECharts/zrender")',
                    main: 'zrender'
                }
            ]
        });


            function BuildOptionForChartA(data) {
                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: true,
                            dataView: { readOnly: false },
                            magicType: ['line', 'bar'],
                            restore: true,
                            saveAsImage: true
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: []
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitArea: { show: true }
                        }
                    ],
                    series: [
                    ]
                };

                var dataSet = data;
                if (dataSet != null && dataSet.length > 0) {
                    var legendData = option.legend.data;
                    var xAxisData = option.xAxis[0].data;
                    var series = option.series;

                    for (var i = 0 ; i < dataSet.length; i++) {
                        var currentData = dataSet[i];

                        
                        for (var j = 0; j < currentData.SeriesDataSet.length; j++) {
                            var currentSeriesData = currentData.SeriesDataSet[j];
                         
                            var legendName = currentSeriesData.Name;

                            //legend
                            if (legendData.indexOf(legendName) < 0) {
                                legendData.push(legendName)
                            }

                            //series
                            var currentSeries = getObjects(series, 'name', currentSeriesData.Name);
                            if (currentSeries == null || currentSeries[0] == null) {
                                currentSeries = {
                                    name: currentSeriesData.Name,
                                    type: 'bar',
                                    stack: 'Total',
                                    data: [currentSeriesData.Value],
                                    itemStyle: { normal: { label: { show: true, position: 'inside' } } },
                                };
                                series.push(currentSeries);
                            }
                            else {
                                currentSeries[0].data.push(currentSeriesData.Value);
                            }
                        }

                        //xAxis
                        xAxisData.push(currentData.XAxisData);
                    }
                }

                return option;
            }


            function ShowChartA() {
                require(
                    [
                        'echarts',
                        'echarts/chart/line',
                        'echarts/chart/bar'
                    ],
                    function (ec) {
                        var myChart1 = ec.init(document.getElementById('main1'));
                    @{ 
                        var dataSet = ViewBag.DataSet as List<PortalLogReport.Models.BarChartViewModel>;
                        string logsJson = Json.Encode(dataSet);
                    }

                        var option = BuildOptionForChartA(eval(@Html.Raw(logsJson)));
                        myChart1.setOption(option);
                        var ecConfig = require('echarts/config');
                        myChart1.on(ecConfig.EVENT.CLICK, function (param) {

                            //  var selectdata;
                            //  var selected = option.series;
                            //  option.series[param]
                            //  for (var i = 0; i < selected.length; i++) {
                            //      var sp = selected[i].data;
                            //  }
                            //alert(param.name + " " + option.series[param.seriesIndex].name + " " + param.value);

                            




                        })
                    }
            );
            };


            var option2 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    x: 'right',
                    y: 'center',
                    feature: {
                        mark: true,
                        dataView: { readOnly: false },
                        magicType: ['line', 'bar'],
                        restore: true,
                        saveAsImage: true
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitArea: { show: true }
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '邮件营销',
                        type: 'bar',
                        stack: '广告',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'bar',
                        stack: '广告',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'bar',
                        stack: '广告',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '搜索引擎',
                        type: 'bar',
                        data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                        markLine: {
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                }
                            },
                            data: [
                                [
                                    { name: '周最低', xAxis: '周一', yAxis: 900 },
                                    { name: '周最高', xAxis: '周五', yAxis: 1750 }
                                ]
                            ]
                        }
                    },
                    {
                        name: '百度',
                        type: 'bar',
                        barWidth: 5,
                        stack: '搜索引擎',
                        data: [620, 732, 701, 734, 1090, 1130, 1120]
                    },
                    {
                        name: '谷歌',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: [120, 132, 101, 134, 290, 230, 220]
                    },
                    {
                        name: '必应',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: [60, 72, 71, 74, 190, 130, 110]
                    },
                    {
                        name: '其他',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: [62, 82, 91, 84, 109, 110, 120]
                    }
                ]
            };




            function ShowChartB() {

                require(
                   [
                       'echarts',
                       'echarts/chart/line',
                       'echarts/chart/bar'
                   ],
                   function (ec) {
                       var myChart2 = ec.init(document.getElementById('main2'));
                       myChart2.setOption(option2);
                   }
               )

            }

            var option3 = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: true,
                        dataView: { readOnly: false },
                        restore: true,
                        saveAsImage: true
                    }
                },
                calculable: false,
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, 70],
                        itemStyle: {
                            normal: {
                                label: {
                                    position: 'inner'
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        data: [
                            { value: 335, name: '直达' },
                            { value: 679, name: '营销广告' },
                            { value: 1548, name: '搜索引擎', selected: true }
                        ]
                    },
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: [100, 140],
                        data: [
                            { value: 335, name: '直达' },
                            { value: 310, name: '邮件营销' },
                            { value: 234, name: '联盟广告' },
                            { value: 135, name: '视频广告' },
                            { value: 1048, name: '百度' },
                            { value: 251, name: '谷歌' },
                            { value: 147, name: '必应' },
                            { value: 102, name: '其他' }
                        ]
                    }
                ]
            };

            function ShowChartC() {

                require(
                   [
                       'echarts',
                       'echarts/chart/line',
                       'echarts/chart/bar',
                       'echarts/chart/pie'
                   ],
                   function (ec) {
                       var myChart3 = ec.init(document.getElementById('main3'));
                       myChart3.setOption(option3);
                       //var ecConfig = require('echarts/config');
                       //myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param) {
                       //    var selected = param.selected;
                       //    var serie;
                       //    var str = '当前选择： ';
                       //    for (var idx in selected) {
                       //        serie = option.series[idx];
                       //        for (var i = 0, l = serie.data.length; i < l; i++) {
                       //            if (selected[idx][i]) {
                       //                str += '【系列' + idx + '】' + serie.name + ' : ' +
                       //                       '【数据' + i + '】' + serie.data[i].name + ' ';
                       //            }
                       //        }
                       //    }
                       //    document.getElementById('wrong-message').innerHTML = str;
                       //})
                   }
               )

            }
    </script>
    

    
}
